<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    请选择省份：
    <select name="" id="provence">
        <option value="">请选择</option>
        <option value="zj">浙江省</option>
        <option value="hb">湖北省</option>
        <option value="gd">广东省</option>
    </select>

    <select name="" id="hb" >
            <option value="">请选择</option>
            <option value="zj">武汉市</option>
            <option value="hb">锦州市</option>
            <option value="gd">鄂州市</option>
        </select>

        <select name="" id="zj">
                <option value="">请选择</option>
                <option value="zj">嘉兴市</option>
                <option value="hb">杭州市</option>
                <option value="gd">衢州市</option>
            </select>

    <script>
        /* 
            需求：
                1.选择对应的省份的时候，输出该option标签的value值
                1.根据选择的省份选择对应的城市
         */
         const selectObj = document.querySelector("#provence")
         const hbObj = document.querySelector("#hb")
         const zjObj = document.querySelector("#zj")
         console.dir(selectObj);
         const options = selectObj.options;
         //当改变选项的时候，触发事件

         /* selectObj.onclick = function(){
             console.log('change')       //会触发两次
         } */

           selectObj.addEventListener("change",function(){
                // console.log('改变')

                //这个还会返回当前选择的option对应的index
                // console.log(selectObj.options)
                // console.log(selectObj.children)

                // console.log(options[])
                //如何单独的获得当前选中的index
                // console.log(selectObj.selectedIndex)
                console.log(options[selectObj.selectedIndex].value)
                console.log(options[selectObj.selectedIndex].innerHTML)
            })

            console.log("---------------")
            // console.log(selectObj[0])
            // console.log(selectObj[1])
            selectObj[1].addEventListener("change",function(){

            })


    </script>
</body>
</html>